<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Vue 3 指令演示</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            font-family: Arial;
            max-width: 600px;
            margin: 20px auto;
            padding: 0 20px;
        }

        .section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
        }

        button,
        input,
        select {
            margin: 5px;
            padding: 5px;
        }

        .item {
            background: #f0f0f0;
            margin: 5px 0;
            padding: 5px;
        }

        .active {
            background: #e3f2fd;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>Vue 3 指令演示</h1>

        <div class="section">
            <h3>v-show</h3>
            <button @click="show = !show">切换显示</button>
            <p v-show="show">显示/隐藏的内容</p>
        </div>

        <div class="section">
            <h3>v-if / v-else</h3>
            <button @click="toggle = !toggle">切换状态</button>
            <p v-if="toggle">条件为真</p>
            <p v-else>条件为假</p>
        </div>

        <div class="section">
            <h3>v-for</h3>
            <input :value="newItem" @input="newItem = $event.target.value">
            <button @click="addItem">添加</button>
            <div class="item" v-for="(item, i) in items" :key="i">{{ i+1 }}. {{ item }}</div>
        </div>

        <div class="section">
            <h3>v-on</h3>
            <button @click="count++">点击计数: {{ count }}</button>
            <button @click="reset">重置</button>
        </div>

        <div class="section">
            <h3>v-bind</h3>
            <select :value="color" @change="color = $event.target.value">
                <option value="red">红色</option>
                <option value="blue">蓝色</option>
            </select>
            <p :class="{ active: isActive }" :style="{ color: color }">动态样式文本</p>
            <button @click="isActive = !isActive">切换类名</button>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    show: true,
                    toggle: true,
                    items: ['Vue', 'React', 'Angular'],
                    newItem: '',
                    count: 0,
                    color: 'red',
                    isActive: true
                }
            },
            methods: {
                addItem() {
                    if (this.newItem) {
                        this.items.push(this.newItem);
                        this.newItem = '';
                    }
                },
                reset() {
                    this.count = 0;
                }
            }
        }).mount('#app');
    </script>
</body>

</html>